<template>
  <!-- 列表页面 -->
  <div class="container" v-if="show">
    <p style="height: 18px;line-height: 16px;" class="title">候考工作人员管理</p>
    <div class="operation">
      <a href="javascript:;" class="save" @click="addUser">新增</a>
      <a href="javascript:;" class="save" @click="dialogVisible = true">导入</a>
    </div>
    <table class="table" border="1" cellspacing="0" cellpadding="0" borderColor="#e0e0e0">
      <thead>
        <tr>
          <td>#</td>
          <td>姓名</td>
          <td>所在学校</td>
          <td>考点</td>
          <td>考场编号</td>
          <td>候考地点</td>
          <td>编号</td>
          <td>时间</td>
          <td>联系电话</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,i) in temp" :key="i">
          <td>{{i+1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.school}}</td>
          <td>{{item.kaodian}}</td>
          <td>{{item.code}}</td>
          <td>{{item.local}}</td>
          <td>{{item.id}}</td>
          <td>{{item.time}}</td>
          <td>{{item.phone}}</td>
          <td>
            <i class="el-icon-edit" @click="editUser"></i>
            <i class="el-icon-delete"></i>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="page">
      <label for="">
        每页显示
        <select name="" id="">
          <option value="5">
            5
          </option>
          <option value="5">
            10
          </option>
          <option value="5">
            20
          </option>
          <option value="5">
            50
          </option>
        </select>
        共235条数据
      </label>

      <div class="page-num">
        <div class="page-text">
          <i class="el-icon-arrow-left"></i>
          <span>1/23</span>
          <i class="el-icon-arrow-right"></i>
        </div>
        <input class="diy-input" type="text" placeholder="页码数"/>
        <div class="to-page">
          <i class="el-icon-caret-right"></i>
        </div>
      </div>
    </div>
    <el-dialog
      title="导入监考工作人员"
      :visible.sync="dialogVisible"
      width="30%"
      center>
        <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :limit="1"
        :auto-upload="false"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <a href="" class="download">导入模板下载</a>
        <span class="fuzhu"></span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
  </div>
  <!-- 新增页面 -->
  <div class="container" v-else>
    <a class="back" @click="show=true"><i class="el-icon-back"></i><span>返回</span></a>
    <P class="middle-font">新增管理员</P>
    <el-form ref="form" :model="form" label-width="140px" style="width:60%">
      <el-form-item label="管理员姓名">
        <el-input v-model="form.userNmae"></el-input>
      </el-form-item>
      <el-form-item label="管理员角色">
        <!-- <el-input v-model="form.roleKey"></el-input> -->
        <p>{{roleName}}</p>
      </el-form-item>
      <el-form-item label="管理员账号">
        <el-input v-model="form.LoginName"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="form.password "></el-input>
      </el-form-item>
      <el-form-item label="所在区域">
        <!-- <el-input ></el-input> -->
        <p>{{address}}</p>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="form.phoneNumber"></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
    </el-form>
    <!-- <span class="fuzhu"></span> -->
    <div class="btn">
      <a href="" class="save">确定</a>
      <a href="javascript:;" class="cancel" @click="show=true">取消</a>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      temp: [
        { name: '132', school: '幼儿园', kaodian: '育儿考点', code: '0012', local: '3号楼', id: '123456', time: '132456', phone: '1578956451' }
      ],
      siderList: [
      ],
      dialogVisible: false,
      show: true,
      form: {
        userName: '',
        roleKey: '',
        LoginName: '',
        password: '',
        phoneNumber: '',
        email: ''
      }
    }
  },
  methods: {
    addUser () {
      this.show = false
      this.form = {
        userName: '',
        roleKey: '',
        LoginName: '',
        password: '',
        phoneNumber: '',
        email: ''
      }
    },
    editUser (item) {
      this.show = false
      this.form = item
    }
  }
}
</script>

<style lang="stylus" scoped>
color = #4177ff
background = #f3f3f3
@import url('../../assets/styles/base.css');
  .table
    width 100%
    margin-top 25px
    text-align center
    td
      border 1px solid #e0e0e0
    thead
      tr
        background background
        td
          height 48px
          font-weight bold
          line-height 48px
          text-align center
    tbody
      tr
        &:hover
          background #f9faff
        td
          height 46px
          font-size 14px
          line-height 46px
          text-align center
          i
            cursor pointer
            font-size 16px
            &:nth-child(1)
              margin-right 16px
  .download
    float: right;
    margin-top: -23px
    color color
    text-decoration none
  .show-content
    width 70%
    margin-left 30px
    p
      font-weight bold
      span
        margin-right 10px
        color #999
        font-weight normal
</style>

<style>
  .el-upload-list.el-upload-list--text {
    display: block;
    float: right;
    margin-right: 256px;
    margin-top: -6px;
  }
</style>

<style lang="stylus" scoped>
color = #4177ff
background = #f3f3f3
  .back
    cursor pointer
    font-size 14px
    color color
    span
      margin-left 10px
  .big-font
    font-size 18px
    font-weight bold
  .middle-font
    line-height 46px
    font-size 16px
    font-weight bold
  .ann
    color #e0e0e0
    .diy-input
      width 58px
      height 30px
      line-height 30px
      font-size 18px
      border-radius 5px
      border 1px solid #e0e0e0
      margin 0 6px
      text-align center
  .btn
    margin-top 40px
    a
      display inline-block
      width 70px
      height 38px
      text-align center
      line-height 38px
      border-radius 5px
      color #fff
      text-decoration none
      margin-right 14px
      &.save
        background color
      &.cancel
        color color
        border 1px solid color
  .fuzhu
    top 10px
</style>
